import React, { Component } from 'react'
import { Card, Button, Modal } from 'antd'

class Modals extends Component {
    state = {
        showModal1: false,
        showModal2: false,
        showModal3: false,
        showModal4: false,
    }

    handleShowModal = () => {
        this.setState({
            showModal1: true
        })
    }

    handleOpen = (type) => {
        this.setState({
            [type]: true
        })
        // console.log(type)
    }

    handleConfirm = (type) => {
        Modal[type]({
            title: '确定？',
            content: '你确定学会AntD了吗？',
            okText: '确定',
            onOk() {
                // console.log('ok')
            }
        })
    }

    render() {
        const { showModal1, showModal2, showModal3, showModal4 } = this.state
        return (
            <div className="modal-wrap">
                <Card title="基础模态框" className="card-item">
                    <Button type="primary" onClick={this.handleShowModal}>添加</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal3')}>顶部20px弹框</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal4')}>水平垂直居中</Button>
                </Card>

                <Card title="信息确认框" className="card-item">
                    <Button type="primary" onClick={() => this.handleConfirm('confirm')}>Confirm</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('info')}>Info</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('success')}>Success</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('error')}>Error</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('warning')}>Warning</Button>
                </Card>

                <Modal title="React" visible={showModal1} onCancel={() => {
                    this.setState({
                        showModal1: false
                    })
                }}>
                    <p>欢迎学习AntD UI框架</p>
                </Modal>

                <Modal title="自定义页脚" visible={showModal2} cancelText="取消" okText="确定" onCancel={() => {
                    this.setState({
                        showModal2: false
                    })
                }}>
                    <p>欢迎学习AntD UI框架</p>
                </Modal>

                <Modal title="顶部20px弹框" style={{ top: 20 }} visible={showModal3} cancelText="取消" okText="确定" onCancel={() => {
                    this.setState({
                        showModal3: false
                    })
                }}>
                    <p>欢迎学习AntD UI框架</p>
                </Modal>

                <Modal title="顶部20px弹框" visible={showModal4} centered cancelText="取消" okText="确定" onCancel={() => {
                    this.setState({
                        showModal4: false
                    })
                }}>
                    <p>欢迎学习AntD UI框架</p>
                </Modal>
            </div>
        )
    }
}

export default Modals